<template>
    <header class="bar bar-nav">
        <a class="icon icon-menu pull-left open-panel" data-panel='#panel-left'></a>
        <a class="icon icon-friends pull-right open-panel" data-panel='#panel-right'></a>
        <div class="barnav-hdimg-div" @click="toggle_searchbar"><img src="../assets/head_img.jpg" alt="" class="barnav-hdimg-img"></div>
    </header>
</template>

<script>
    export default {
        name: 'vHeader',
        props: ['head_title'],
        data (){
            return {

            }
        },
        methods:{
            toggle_searchbar(){
                //或者在内联里面直接写 @click="$emit('toggle_searchbar')"
                this.$emit('toggle_searchbar');
            }
        }
    }
</script>

<style scoped>
    .barnav-hdimg-div{
        width:1.6rem;
        height:2.2rem;
        margin:0 auto;
        padding:.3rem 0;
    }
    .barnav-hdimg-img{
        display: inline-block;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
    }

</style>